<template>
  <view class="content">
    <address-picker @confirm='confirmAddress' :show="show"></address-picker>

    <view class="hz1">
      <view class="addr" :style="{marginTop:statusBarHeight,height:titleBarHeight,lineHeight:titleBarHeight}">
        <text class="text1" @tap="show=true">{{ location.city || '定位中' }}</text>
        <u-icon name="arrow-down" size="12" :bold="true" top="2" @tap="show=true"></u-icon>
      </view>
    </view>
    <view :style="{height:totalHeight}"></view>
    <!-- 地图 -->
    <view class="map">
      <!-- 地图组件 -->
      <map id="map"
           :show-location="true"
           :enable-scroll="false"
           scale="30"
           :longitude="location.longitude"
           :latitude="location.latitude"
           style="width:100%; height:100%;"
      >
      </map>
      <view class="current-address">
        <text>{{ location.address }}</text>
        <view class="dot">
          <view></view>
          <view></view>
        </view>
      </view>
      <!-- 返回原点 -->
      <view class="dw">
        <view class="dw2" @tap="getLocation">
          <image src="/static/index/dw.png" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <!-- 搜索 -->
    <view class="search">
      <view class="info1">
        <view class="point"></view>
        <text class="text1">{{ location.address }}</text>
      </view>
      <view @click="switchTab('/pages/cx/cx')" class="info2">
        <view class="point">
          <text></text>
        </view>
        <input disabled v-model="dest" placeholder="你要去哪儿？"/>
      </view>
      <view class="info3">
        <view class="left">
          <image src="/static/index/addr.png" mode="heightFix"></image>
          <text>常用地址：{{ startaddr }}</text>
        </view>
        <view class="right" @tap="goNext('/pages/my/addr')">
          <image src="/static/index/address.png" mode="heightFix"></image>
          <text>地址簿</text>
        </view>
      </view>
    </view>
    <!-- 导航 -->
    <view class="navs">
      <swiper style="height: 100%;" :indicator-dots="true" indicator-active-color="#2988D1">
        <swiper-item>
          <view class="item" v-for="(item,index) in navs[0]" :key="index" @tap="goNext2(item.url)">
            <image :src="item.navimage" mode="heightFix"></image>
            <view class="text1">
              {{ item.name }}
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="item" v-for="(item,index) in navs[1]" :key="index" @tap="goNext2(item.url)">
            <image :src="item.navimage" mode="heightFix"></image>
            <view class="text1">
              {{ item.name }}
            </view>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="item" v-for="(item,index) in navs[2]" :key="index" @tap="goNext2(item.url)">
            <image :src="item.navimage" mode="heightFix"></image>
            <view class="text1">
              {{ item.name }}
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播 -->
    <view class="lb">
      <u-swiper
          :list="list1"
          :indicator="true"
          indicatorMode="dot"
          height="90"
      ></u-swiper>
    </view>
    <!-- 导航2 -->
    <view class="navs2">
      <view class="imgs">
        <view class="left" @click="goNext('/pages/my/sjrz')">
          <image src="/static/index/nav1.png" mode="widthFix"></image>
        </view>
        <view class="right">
          <image src="/static/index/nav2.png" mode="widthFix"></image>
          <image src="/static/index/nav3.png" mode="widthFix"></image>
        </view>
      </view>
      <view class="info">
        <view class="left">
          <text>车主服务专区</text>
        </view>
        <view class="right">
          <text class="text1">查看更多车主服务</text>
          <u-icon name="arrow-right" color="#A4A4A4" size="10"></u-icon>
        </view>
      </view>
    </view>
    <!-- 导航3 -->
    <view class="navs3">
      <view class="item">
        <view class="info1">
          <image src="/static/index/sc.png" mode="widthFix"></image>
          <text class="text1">车主商城</text>
        </view>
        <view class="info2">
          <text>更多好物尽在车主商城</text>
        </view>
      </view>
      <view class="item">
        <view class="info1">
          <image src="/static/index/xc.png" mode="widthFix"></image>
          <text class="text1">洗车</text>
        </view>
        <view class="info2">
          <text>更多好物尽在车主商城</text>
        </view>
      </view>
      <view class="item">
        <view class="info1">
          <image src="/static/index/by.png" mode="widthFix"></image>
          <text class="text1">保养</text>
        </view>
        <view class="info2">
          <text>更多好物尽在车主商城</text>
        </view>
      </view>
      <view class="item">
        <view class="info1">
          <image src="/static/index/jy.png" mode="widthFix"></image>
          <text class="text1">换机油</text>
        </view>
        <view class="info2">
          <text>更多好物尽在车主商城</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../common/request";
import {mapKey} from "@/common/api";

export default {
  data() {
    return {
      // 状态栏（顶部）高度
      statusBarHeight: 0,
      // 导航栏（胶囊）高度
      titleBarHeight: 0,
      // 总高度
      totalHeight: '',

      //城市选择
      show: false,
      columns: [
        ['中国', '美国', '日本']
      ],
      city: '',//城市
      //当前经纬度
      location: {
        latitude: '',
        longitude: '',
        address: '',
        city: ''
      },
      //标点
      covers: [{
        id: 1,
        latitude: '',
        longitude: '',
        width: 20,
        height: 30
      }],

      startaddr: '',//出发地
      dest: '',//目的地

      //导航
      navs: [
        [
          {navimage: '/static/index/lh.png', name: '拉货', url: '/pages/sh/sh'},
          {navimage: '/static/index/bj.png', name: '搬家', url: '/pages/sh/sh'},
          {navimage: '/static/index/bh.png', name: '搬货', url: '/pages/sh/sh'},
          {navimage: '/static/index/ctdc.png', name: '长途大车', url: '/pages/sh/sh'},
          {navimage: '/static/index/qyyc.png', name: '企业用车', url: '/pages/sh/sh'},
          {navimage: '/static/index/pt.png', name: '跑腿', url: '/pages/pt/pt'},
          {navimage: '/static/index/dj.png', name: '代驾'},
          {navimage: '/static/index/dc.png', name: '打车', url: '/pages/cx/cx'},
          {navimage: '/static/index/sfc.png', name: '顺风车', url: '/pages/cx/cx'},
          {navimage: '/static/index/yyc.png', name: '预约车', url: '/pages/pt/pt'},
        ],
        [
          {navimage: '/static/index/sh.png', name: '送货', url: '/pages/sh/sh'},
          {navimage: '/static/index/zc.png', name: '专车', url: '/pages/cx/cx'},
          {navimage: '/static/index/jsj.png', name: '接送机', url: '/pages/cx/cx'},
          {navimage: '/static/index/yhjy.png', name: '优惠加油'},
          {navimage: '/static/index/thxc.png', name: '特惠洗车'},
          {navimage: '/static/index/yxcs.png', name: '严选车饰'},
          {navimage: '/static/index/gjmc.png', name: '高价卖车'},
          {navimage: '/static/index/zhuce.png', name: '租车'},
          {navimage: '/static/index/xnyc.png', name: '新能源车'},
          {navimage: '/static/index/cpsc.png', name: '车品商城'},
        ],
        [
          {navimage: '/static/index/sjrz.png', name: '司机入驻', url: '/pages/my/sjrz'},
          {navimage: '/static/index/cdz.png', name: '充电站'},
          {navimage: '/static/index/elc.png', name: '二轮车'},
        ]
      ],
      //轮播
      list1: [
        '/static/index/lb.png',
      ],
    }
  },
  onLoad() {
    //获取状态栏和导航栏高度
    this.getNavigateHeight()
    this.getLocation()
    this.login();
  },
  watch:{

  },
  methods: {
    //tab跳转
    switchTab(url){
      uni.switchTab({
        url
      })
    },
    confirmAddress(data) {
      this.location.city = data.value[2];
      this.show = false;
    },
    geocoder() {
      let key = '6OWBZ-MRBCZ-X6UXA-ZOUEC-PER45-4OBVP';
      let locationObj = latitude + "," + longitude;//先拿到当前的需要转换位置的经纬度
      let url = "https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&poi_options=page_size=20;page_index=1";
      this.$jsonp(url, {
        key, //腾讯地图key，自行申请,
        location: locationObj,
        output: 'jsonp'
      }).then((res) => {
        console.log(res, "rees");
        this.location.address = res.result.address
        this.$set(this.location, "city", res.result.address_component.city)
        this.$set(this.location, "area", res.result.address_component.district || res.result.address_component.city)
        this.$set(this.location, "province", res.result.address_component.district || res.result.address_component.city)
        uni.setStorageSync('location', this.location);
      }).catch((err) => {
        console.log(err);
      });
    },
    /*async login() {
      let code = this.getUrlParam("code"); // 截取路径中的code
      // code = '031F46000EZyDS1kUX000wtVxr3F460J'
      if (code) {
        let {data: {data: {access_token, openid}}} = await request({
          url: '/d/user/getOpenid',
          data: {
            code
          },
          isAuth: false,
        });
        let {data: {msg}} = await request({
          url: '/d/User/getUserInfo',
          isAuth: false,
          data: {
            access_token,
            openid
          }
        });
        uni.setStorageSync('openid',openid);
        let userinfo = JSON.parse(msg);
        let loginRes = await request({
          url: '/user/wxlogin',
          isAuth: false,
          method:'POSt',
          data: {
            openid: userinfo.openid,
            nickname: userinfo.nickname,
            avatar: userinfo.headimgurl,
            mobile:''
          }
        });
        uni.setStorageSync('userinfo',loginRes.data.userinfo);
        uni.setStorageSync('token',loginRes.data.userinfo.token);
      }
    },*/
    async login() {
      // code = '031F46000EZyDS1kUX000wtVxr3F460J'
      uni.login({
        async success({code}) {
          let {data: {data: {access_token, openid}}} = await request({
            url: '/d/user/getOpenid',
            data: {
              code
            },
    method:'post',
            isAuth: false,
          });
        }
      })

        let {data: {msg}} = await request({
          url: '/d/User/getUserInfo',
          isAuth: false,
          data: {
            access_token,
            openid
          }
        });
        uni.setStorageSync('openid',openid);
        let userinfo = JSON.parse(msg);
        let loginRes = await request({
          url: '/user/wxlogin',
          isAuth: false,
          method:'POSt',
          data: {
            openid: userinfo.openid,
            nickname: userinfo.nickname,
            avatar: userinfo.headimgurl,
            mobile:''
          }
        });
        uni.setStorageSync('userinfo',loginRes.data.userinfo);
        uni.setStorageSync('token',loginRes.data.userinfo.token);
    },

    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
      var r = window.location.search.substr(1).match(reg); //匹配目标参数
      if (r != null) return unescape(r[2]);
      return null; //返回参数值
    },
    //获取状态栏和导航栏高度
    getNavigateHeight() {
      // #ifndef H5 || APP-PLUS || MP-ALIPAY
      let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      uni.getSystemInfo({ //获取系统信息
        success: res => {
          //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
          let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2;
          // 导航栏（胶囊）高度
          this.titleBarHeight = Number(parseInt(navHeight / (uni.upx2px(100) / 100))) + 'rpx';
          //  状态栏（顶部）高度
          this.statusBarHeight = Number(parseInt(res.statusBarHeight / (uni.upx2px(100) / 100))) +
              'rpx';
          let total = Number(navHeight + res.statusBarHeight) / (uni.upx2px(100) / 100);
          // rpx内置转换 = xxx(px)/(uni.upx2px(100) / 100)
          this.totalHeight = Number(parseInt(total)) + 'rpx';
        },
        fail(err) {
          console.log(err);
        }
      })
      // #endif
    },
    //右下角定位按钮的点击事件
    clickcontrol() {
      uni.createMapContext("map", this).moveToLocation({   //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
        latitude: this.lat,
        longitude: this.lng
      });
    },
    //获取定位
    getLocation() {
      console.log(12)
      let that = this
      uni.getLocation({
        type: 'gcj02',
        isHighAccuracy: true,
        success: function (res) {
          console.log('location', res)
          uni.setStorageSync('latitude', res.latitude);
          uni.setStorageSync('longitude', res.longitude);
          that.location = {
            latitude: res.latitude,

            longitude: res.longitude
          }
          // that.loadCity(res.latitude, res.longitude)
          /**
           *   :longitude="106.33"
           *            :latitude="29.35"
           */
          that.getUserLocation(res.latitude, res.longitude)
        },
        fail: function (err) {
          console.log(err)
          uni.showModal({
            title: '提示',
            content: '请检查定位服务是否打开',
          })
        }
      });
    },
    getUserLocation(latitude, longitude) {
      let locationObj = latitude + "," + longitude;//先拿到当前的需要转换位置的经纬度
      let url = "https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&poi_options=page_size=20;page_index=1";
      this.$jsonp(url, {
        key:mapKey, //腾讯地图key，自行申请,
        location: locationObj,
        output: 'jsonp'
      }).then((res) => {
        console.log(res, "rees");
        this.location.address = res.result.address
        this.$set(this.location, "city", res.result.address_component.city)
        this.$set(this.location, "area", res.result.address_component.district || res.result.address_component.city)
        this.$set(this.location, "province", res.result.address_component.district || res.result.address_component.city)
        this.$set(this.location, "street", res.result.address_component.street)

        uni.setStorageSync('location', this.location);
      }).catch((err) => {
        console.log(err);
      });
    },
    //根据经纬度获取城市名称
    loadCity(lat, lng) {
      let _this = this
      let key = '6OWBZ-MRBCZ-X6UXA-ZOUEC-PER45-4OBVP';
      uni.request({
        url: 'https://apis.map.qq.com/ws/geocoder/v1/',
        data: {
          key,
          extensions: 'all',
          location: `${lng},${lat}`,
        },
        method: "GET",
        success(res) {
          console.log(res);
          // _this.location.address = res.data.regeocode.formatted_address;
          _this.location.address = res.data.regeocode.addressComponent.neighborhood.name
          _this.$set(_this.location, "city", res.data.regeocode.addressComponent.district)
          console.log(_this.location.city)

        },
        fail(err) {
          console.log(err)
        }
      })
    },
    //选择城市
    chooseCity(e) {
      this.city = e.value[0]
      this.show = false
    },
    //跳转
    goNext(url) {
      uni.navigateTo({
        url: url
      })
    },
    //跳转
    goNext2(url) {
      uni.reLaunch({
        url: url
      })
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/ .uni-swiper-dots {
  width: 83rpx;
  height: 5rpx;
  background: #E4E8EB;
  border-radius: 3rpx;
}

/deep/ .uni-swiper-dot {
  width: 28rpx !important;
  border-radius: 3rpx;
  height: 5rpx !important;
}

/deep/ .uni-swiper-dot-active {
  width: 28rpx !important;
  height: 5rpx !important;
  background: #0084FF;
  border-radius: 3rpx;
}

.content {
  padding-bottom: 50rpx;

  .hz1 {
    height: 80rpx;
    width: 100%;
    background-color: #fff;

    display: flex;
    align-items: center;

    .addr {
      display: flex;
      height: 100%;
      width: 100%;
      padding-left: 50rpx;
      line-height: 50rpx;
      letter-spacing: 2rpx;
      font-weight: bold;

      .text1 {
        margin-right: 20rpx;
      }
    }
  }

  /* 地图容器样式 */
  .map {
    margin: 20rpx 20rpx 0;
    height: 392rpx;
    border-radius: 30rpx;
    overflow: hidden;
    position: relative;

    &:after {
      content: "";
      position: absolute;
      z-index: 99;
      width: 100%;
      height: 100%;
      top: 0;
    }

    .current-address {
      position: absolute;
      background: #FFFFFF;
      padding: 22rpx 20rpx;
      box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(26, 26, 26, 0.35);
      border-radius: 24rpx;
      font-weight: 500;
      font-size: 24rpx;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%);
      color: #222222;
      display: flex;
      justify-content: center;

      > view {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        align-items: center;

        view:first-child {
          width: 5rpx;
          height: 34rpx;
          background: #17B078;
        }

        view:last-child {
          width: 20rpx;
          height: 20rpx;
          background: #17B078;
          border-radius: 50%;
        }
      }
    }

    .dw {
      position: absolute;
      right: 20rpx;
      z-index: 999;
      bottom: 53rpx;
      display: flex;
      justify-content: flex-end;

      .dw2 {
        background-color: #fff;
        width: 80rpx;
        height: 80rpx;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 50rpx;
        }
      }
    }
  }

  .search {
    position: relative;
    z-index: 999;
    margin: -40rpx 20rpx 0;
    background-color: #fff;
    border-radius: 40rpx;
    padding: 50rpx 20rpx 30rpx;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

    .info1 {
      display: flex;
      padding-left: 20rpx;

      .point {
        margin-top: 15rpx;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background-color: #00AE55;
      }

      .text1 {
        margin-left: 30rpx;
        font-size: $uni-font-size-lg;
        font-weight: bold;
        color: #00AE55;
        line-height: 50rpx;
      }
    }

    .info2 {
      margin-top: 30rpx;
      background-color: #EFF1F5;
      border-radius: 20rpx;
      height: 50rpx;
      line-height: 50rpx;
      padding: 25rpx 20rpx;
      display: flex;

      .point {
        margin-top: 10rpx;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        text {
          display: inline-block;
          width: 15rpx;
          height: 15rpx;
          border-radius: 50%;
          background-color: #FF4B48;
        }
      }

      input {
        margin-left: 30rpx;
        width: 100%;
      }
    }

    .info3 {
      margin-top: 30rpx;
      padding-left: 20rpx;
      line-height: 40rpx;
      display: flex;
      font-size: $uni-font-size-sm;
      color: #A6A6A6;

      .left {
        width: 75%;
        border-right: 1rpx solid #F3F3F3;
        display: flex;

        image {
          margin-top: 5rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }

      .right {
        margin-left: auto;
        display: flex;

        image {
          margin-top: 5rpx;
          height: 30rpx;
          margin-right: 10rpx;
        }
      }
    }
  }

  //导航
  .navs {
    margin: 50rpx 20rpx 0;
    height: 328rpx;

    swiper {
      swiper-item {
        display: flex;
        flex-wrap: wrap;

        .item {
          width: 20%;
          display: flex;
          height: 158rpx;
          flex-direction: column;
          align-items: center;

          image {
            height: 60rpx;
          }

          .text1 {
            margin-top: 15rpx;
            line-height: 40rpx;
            font-weight: bold;
          }
        }
      }
    }

  }

  //轮播
  .lb {
    margin: 20rpx 20rpx 0;
  }

  //导航2
  .navs2 {
    margin: 30rpx 20rpx 0;

    .imgs {
      display: flex;

      .left {
        width: 350rpx;

        image {
          width: 350rpx;
        }
      }

      .right {
        margin-left: 10rpx;
        width: 350rpx;

        image {
          width: 350rpx;
        }
      }
    }

    .info {
      margin-top: 20rpx;
      line-height: 50rpx;
      display: flex;

      .left {
        font-size: $uni-font-size-lg;
        font-weight: bold;
      }

      .right {
        margin-left: auto;
        font-size: $uni-font-size-sm;
        font-weight: bold;
        color: #A4A4A4;
        display: flex;

        .text1 {
          margin-right: 5rpx;
        }
      }
    }
  }

  //导航3
  .navs3 {
    margin: 30rpx 20rpx;
    background-color: #E6F2FF;
    padding: 20rpx;
    border-radius: 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .item {
      padding: 40rpx 15rpx 30rpx;
      width: 300rpx;
      background-color: #fff;
      border-radius: 20rpx;
      margin-bottom: 15rpx;

      .info1 {
        display: flex;
        line-height: 40rpx;

        image {
          width: 40rpx;
          margin-right: 5rpx;
        }

        .text1 {
          font-size: $uni-font-size-lg;
          font-weight: bold;
        }
      }

      .info2 {
        margin-top: 10rpx;
        font-size: $uni-font-size-sm;
        font-weight: bold;
        color: #B0B0B0;
      }
    }
  }
}
</style>
